<template>
  <div>
    <el-container>
      <el-header>
        <el-button type="primary" class="btn" @click="end">结束编辑</el-button>
        <el-button type="info" @click="clearDraw">清除标记</el-button>
        <div class="input-card" style="width: 24rem;">
          <div class="input-item">
            <el-radio name="func" border v-model="drawModel" label="polygon">绘制多边形</el-radio>
          </div>
        </div>

      </el-header>
      <el-main>
        <div id="container" style="width:100%;height:530px"/>

      </el-main>
    </el-container>
  </div>

</template>

<script>
import coreOrg from '@/api/base/coreOrg'
import AMap from 'AMap'

export default {
  name: 'scope',
  data() {
    return {
      //路径
      path: [],
      drawModel: '',
      coreOrgData: {},
      scopeId: '',
      //高德地图map
      map: null,
      mouseTool: null,
      overlays: [],
      radios: null,
      marker: null,
      scopeFrom: {
        agencyId: '',
        areaId: '',
        mutiPoints: []
      },
      coreOrgScope: {},
      //多边形对象
      polygon: null,
      overlayGroup:null
    }
  }, methods: {
    findById(id) {
      coreOrg.findById(id).then(data => {
        this.coreOrgData = data.data
        this.$nextTick(() => {
          /**
           * 显示地图
           */
          this.showAmap();

          /**
           * 查询机构业务数据
           */
          this.findAllAgencyScope(this.scopeId)
        })
      })
    },
    /**
     *显示地图
     * */
    showAmap() {
      this.map = new AMap.Map('container', {
        zoom: 11, // 级别
        // resizeEnable: true,
        center: [Number(this.coreOrgData.longitude), Number(this.coreOrgData.latitude)]
      })

      this.marker = new AMap.Marker({
        position: new AMap.LngLat(Number(this.coreOrgData.longitude), Number(this.coreOrgData.latitude)),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: this.coreOrgData.name
      })
      this.map.add(this.marker)
      //工具
      this.mouseTool = new AMap.MouseTool(this.map)
      //监听draw事件可获取画好的覆盖物
      this.mouseTool.on('draw', this.push)
      this.radios = document.getElementsByName('func')
      for (var i = 0; i < this.radios.length; i += 1) {
        this.radios[i].onchange = this.radiosOnchange
      }

      this.draw('marker')
      AMap.event.addListener(this.mouseTool, 'draw', this.getLatitudeAndLongitude)
    },
    clearDraw() {
      this.polygon=null;
      this.mouseTool.close(true)//关闭，并清除覆盖物
      for (var i = 0; i < this.radios.length; i += 1) {
        this.radios[i].checked = false
      }
    },
    //单选按钮改变时间
    radiosOnchange(e) {
      this.draw(e.target.value)
    },
    //推送到地图上
    push(e) {
      this.overlays.push(e.obj)
    },
    //开始绘制
    draw(type) {
      switch (type) {
        case 'polygon': {
          this.mouseTool.polygon({
            fillColor: '#00b0ff',
            strokeColor: '#80d8ff'
            //同Polygon的Option设置
          })
          break
        }
      }
    },
    getLatitudeAndLongitude(e) {//添加事件
      let path = e.obj.getPath()
      for (let i = 0; i < path.length; i++) {
        this.scopeFrom.mutiPoints[i] = {
          'lat': path[i].lat,
          'lng': path[i].lng
        }
      }
    },
    /**
     * 结束编辑的一件事
     * @param event
     */
    end() {
      let form = [this.scopeFrom]
      //添加
      coreOrg.batchSaveAgencyScope(form).then(data => {
        this.$message({
          message: '范围编辑成功!',
          type: 'success',
          showClose: true
        })
        this.$router.push({ path: '/agencyScope-index' })
      })
    },
    //查询机构业务范围
    findAllAgencyScope(id) {
      coreOrg.findAllAgencyScope(id).then(data => {
        this.coreOrgScope = data.data[0]
        let scope = this.coreOrgScope
        //36个数据为圆形
        let mutiPoints = scope.mutiPoints
        for (let i = 0; i < mutiPoints.length; i++) {
          let lng = mutiPoints[i].lng
          let lat = mutiPoints[i].lat;
          let a=[lng,lat];
          this.path.push(a);
        }
        this.polygon = new AMap.Polygon({
          path: this.path,
          strokeColor: '#FF33FF', //线颜色
          strokeOpacity: 0.2, //线透明度
          strokeWeight: 3,    //线宽
          fillColor: '#1791fc', //填充色
          fillOpacity: 0.35//填充透明度
        })
        this.polygon.setMap(this.map);
      })
    }
  }, mounted() {
    if (this.$route.params && this.$route.params.id) {
      this.scopeId = this.$route.params.id
      /**
       *将数据复制给它
       */
      this.scopeFrom.agencyId = this.$route.params.id
      //TODO 可能需要增加其他的功能(行政区域功能)
      this.scopeFrom.areaId = this.$route.params.id
      this.findById(this.scopeId)

    }

  }
}
</script>

<style scoped>

</style>
